<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="四点半课堂" autoBack>
			</u-navbar>
		</view>


		<view class="con-body">
			<!-- 服务项目 -->
			<view>
				<u-image :src="banner" width="100%" height="300rpx"></u-image>
			</view>
			<view class="title"
				style="width: 100%; height: 90rpx; line-height: 90rpx; font-size: 40rpx;background-color: #FFFFFF; padding-left: 20rpx;">
				服务项目</view>
			<view class="user-list">
				
				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
				<view class="user-list-cell" v-for="(item, index) in serviceList">
					<view class="u-flex u-row-between" style="background-color: #fff; width: 96%; margin-left: 2%;overflow: hidden;border-radius: 20rpx;">
						<image style="width:40%;height:268rpx;" :src="item.image" mode="aspectFill"></image>
						<view class="user-list" style="width:60%;height:85%;padding:20rpx 10rpx;">
							<view class="title">
								<text>{{item.name}}</text>
							</view>
							<view style="padding-bottom: 20rpx;margin-top:15rpx;">
								<view style="font-size: 24rpx;color:#666;">
									<text>看护时间:{{item.label}}</text>
								</view>
						
								<view class="d_view u-flex u-row-between" v-if="item.price == 0">
									<text style="color:red;font-size: 30rpx;">免费</text>
									<text class="btn_style" @click="join(item)">点击报名</text>
								</view>
						
								<view class="d_view u-flex u-row-between" v-else>
									<text style="color:#666;"><text style="color:red;font-size: 32rpx;">￥{{item.price}}</text>/天</text>
									<text class="btn_style" @click="join(item)">点击报名</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShareService
	} from "@/service/configService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginTop: '40rpx',
					marginBottom: '40rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				},
				gid: 0,
				banner: 'https://s4.ax1x.com/2022/03/04/bNDbwt.png',
				serviceList: [],
				nid: 0,
				showEmpty: false
			}
		},
		onLoad(options) {
			this.nid = options.nid;
			this.banner=options.image;
			getShareService({
				id: this.nid
			}).then(this.getShareService);
		},
		methods: {
			getShareService(e){
				if(e.code == 200){
					this.showEmpty = false;
					this.serviceList = e.result;
				}else{
					this.showEmpty = true;
				}
			},
			
			join(item) {
				this.$u.route({
					url: '/pagesShare/schoole/join',
					params: {
						nid: item.id,
						memo: item.memo
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.d_title {
		font-size: 40rpx;
		color: #111111;
		margin-top: 40rpx;
		font-weight: 400;
	}
	.d_view {
		margin-top: 80rpx;
		font-size: 26rpx;
	}
	.btn_style{
		padding:5rpx 20rpx;
		border-radius: 25rpx;
		border-top-left-radius: 0;
		background-color: #ffc400;
	}
</style>
